<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Vue基础</title>
	</head>

	<body>
		<div id="app">
			{{message}}
			<h2>{{school.name}} {{school.mobile}}</h2>
			<ul>
				<li>{{campus[0]}}</li>
				<li>{{campus[1]}}</li>
				<li>{{campus[2]}}</li>
				<li>{{campus[3]}}</li>
			</ul>
			<h2 v-text="message+'!'">深圳</h2>
			<h2 v-text="info+'!'">深圳</h2>
			<h2>{{message+"!"}}深圳</h2>
			<h2 v-html="content"></h2>
			<input type="button" value="v-on" v-on:click="dolt" />
			<input type="button" value="简写v-on" @click="dolt" />
			<input type="button" value="双击事件" @dblclick="dolt" />
			<h2 @click="changeFood">{{food}}</h2>
		</div>

		<script>
			var app=new Vue({
				el:"#app",
				data:{
					message:"黑马程序员",
					school:{
						name:"黑马程序员",
						mobile:"400-618-9090"
					},
					campus:["北京校区","上海校区","广州校区","深圳校区"],
					info:"前端与移动教研部",
					content:"<a href='https://www.baidu.com/'>黑马程序员<a/>",
					food:"西兰花炒蛋"
				},
				methods:{
					dolt:function(){
						alert("IT")
					},
					changeFood:function(){
						//console.log(this.food)
						this.food+="好好吃"
					},
				}
			})
		</script>
	</body>

</html>
